<template>
	<div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>选择模板：</span><el-select v-model="mubans" placeholder="请选择" @change="getmuban" size="medium"
					style="width: 350px;margin-left: 40px;">
					<el-option v-for="(item, index) in muban" :key="index" :label="item.name" :value="item.blab"
						:disabled="!item.type.includes(ruleForm.inventoryType)">
					</el-option>
				</el-select>
				<div style="margin: 20px 0;"></div>
				<span>条码规则：</span><el-select v-model="types" placeholder="请选择" @change="typechange" size="medium"
					style="width: 350px;margin-left: 40px;">

					<el-option label="旧规则" value="2">
					</el-option><el-option label="新规则" value="1">
					</el-option>
				</el-select>
			</div>
			<div>
				<div v-if="mubans" class="msg-box">
					<div class="left-msg">
						<div class="tiaoma" v-if="['C70中药配方颗粒', 'C90中药配方颗粒'].includes(ruleForm.inventoryType)" >
							<div style="font-weight: 600;margin-bottom: 30px;">打印预览（{{ ruleForm.inventoryType }}）</div>
							<div class="img-erwei">
								<div  class="img1">
									<img :src="objectURL"/>
									 <p style="text-align: center;">{{types=='1'?ruleForm.newBarCode:ruleForm.barCode }}
									</p>
								</div>
								<img :src="imgs" alt="" class="img2">
							</div>
							
						</div>
						<div class="msg-muban">
							<div class="names" style="font-weight: 600;margin-top: 20px;">{{ ruleForm.breedName }}</div>
							<div>
								<div class="msg-item">
									<div class="item-left">产地</div>
									<div class="item-right">{{ ruleForm.address }}</div>
								</div>
								<div class="msg-item">
									<div class="item-left">批号</div>
									<div class="item-right">{{ ruleForm.batch }}</div>
								</div>
								<div class="msg-item">
									<div class="item-left">生产日期</div>
									<div class="item-right">{{ ruleForm.scTime }}</div>
								</div>
								<div class="msg-item">
									<div class="item-left">保质期</div>
									<div class="item-right">{{ ruleForm.deadLine }}</div>
								</div>
								<div class="msg-item">
									<div class="item-left">规格</div>
									<div class="item-right">{{ ruleForm.units }}</div>
								</div>
								<div class="msg-item">
									<div class="item-left">装量</div>
									<div class="item-right">{{ ruleForm.pelletWeight }}</div>
								</div>
								<div class="msg-item">
									<div class="item-left">贮藏</div>
									<div class="item-right">{{ ruleForm.storage }}</div>
								</div>
								<div class="msg-item">
									<div class="item-left">中药饮片执行标准</div>
									<div class="item-right">{{ ruleForm.zyyp }}</div>
								</div>
								<div class="msg-item">
									<div class="item-left">中药配方颗粒执行标准</div>
									<div class="item-right">{{ ruleForm.nowzypf }}</div>
								</div>
								<div class="msg-item">
									<div class="item-left">生产备案号</div>
									<div class="item-right">{{ ruleForm.prodRecordCode }}</div>
								</div>
								<div class="msg-item">
									<div class="item-left">销售备案号</div>
									<div class="item-right">{{ ruleForm.nowCheck }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-card>
		<el-card style="width: 800px;margin: 20px 0;">
			<h3 style="margin-bottom: 20px">打印发送</h3>
			<el-row>
				<el-col>
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" class="demo-ruleForm"
						label-width="160px">
						<el-form-item label="申请码数：" prop="printNum">
							<el-input v-model.number="ruleForm.printNum" @change="changeNum" type="number"
								style="width:300px"></el-input>
							&nbsp;&nbsp;
							未打印： {{ infos.most }}
							&nbsp;&nbsp;
							已打印： {{ infos.lastPrintNum }}
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<div class="position">
				<el-button type="primary" @click="submitRules('ruleForm')" :disabled="disabled">提交</el-button>
				<el-button @click="backPage">返回</el-button>
			</div>
		</el-card>

	</div>
</template>

<script>
import { print_findMsg, print_detail, print_send, template_get } from "@/request/api";
import { template_findByCompanyId, getnewVisions } from "@/request/manageapi"
import codebars from "@/assets/img/codeImg1.png"
export default {
	components: {

	},
	data() {
		return {
			imgs: "",
			muban: [
				//c60 c70 -- 打印模板（国标） isNew = 1
				//c80  -- 打印模板（省标） isNew = 2
				//c90  -- 打印模板（省标）-执行标准-详见二维码 isNew = 4
				{ name: "打印模板（国标）", blab: "1", type: ['C60中药配方颗粒', 'C70中药配方颗粒', 'C90中药配方颗粒'], showName: "", noJosn: 1 },
				// {name:'打印模板（国标）-上海',blab:"3"},
				{ name: "打印模板（国标C60）-上海", blab: "5", type: ['C60中药配方颗粒'], showName: "上海", noJosn: 1 },
				{ name: "打印模板（国标C70）-上海", blab: "6", type: ['C70中药配方颗粒'], showName: "上海", noJosn: 1 },
				{ name: "打印模板（省标）", blab: "2", type: ['C80中药配方颗粒', 'C90中药配方颗粒'], showName: "", noJosn: 2 },
				{ name: '打印模板（省标C80）-上海', blab: "7", type: ['C80中药配方颗粒'], showName: "上海", noJosn: 2 },
				{ name: '打印模板（省标C90）-上海', blab: "8", type: ['C90中药配方颗粒'], showName: "上海", noJosn: 2 },
				{ name: "打印模板（省标）-执行标准-详见二维码", blab: "4", type: ['C90中药配方颗粒'], showName: "", noJosn: 3 },
			],
			mubans: '1',
			types: "2",
			imgs2:codebars,
			rules: {
				printNum: [
					{ required: true, message: '不能为空', trigger: 'blur' },
				],
			},
			ruleForm: {},
			// ctypes:"",
			infos: {
				id: "",
				bench: "",
				endPrintNum: 0,
				lastPrintNum: 0,
				most: 0,
			},
			content: [],
			keys: {
				'产地': 'address',
				'批号': "batch",
				'生产日期': "scTime",
				'保质期': "deadLine",
				'规格': "units",
				'装量': "pelletWeight",
				'贮藏': "storage",
				'中药饮片执行标准': "zyyp",
				'中药配方颗粒执行标准': "nowzypf",
				'生产备案号': "prodRecordCode",
				'销售备案号': "nowCheck",
			},
			disabled: true,
			objectURL:"",
			chooseShow: {}
		};
	},
	mounted() {
		console.log(this.$route.query)
		this.infos.id = this.$route.query.id
		this.infos.bench = this.$route.query.bench
		this.infos.endPrintNum = Number(this.$route.query.endNum)
		this.infos.lastPrintNum = Number(this.$route.query.lastPrintNum)
		this.infos.most = Math.round((this.infos.endPrintNum) - this.infos.lastPrintNum)
		this.init();
		this.versons();
	},
	created() {
		if (process.env.NODE_ENV === 'development') {
			this.imgs = '/api/print/getCodeByBatch?batch=' + this.$route.query.bench
		} else {
			this.imgs = "http://" + window.location.host + '/print/getCodeByBatch?batch=' + this.$route.query.bench
		}
	},
	methods: {
		init() {
			print_findMsg(this.infos.id).then((res) => {
				console.log(res)
				if (res.code != '200') {
					this.content = []
					this.disabled = []
					this.ruleForm = {}
				} else {
					this.ruleForm = res.data
					this.ruleForm.scTime = res.data.scTime.replace(/-/g, ".")
					this.ruleForm.deadLine = res.data.deadLine.replace(/-/g, ".")
					this.ruleForm.barCode = this.ruleForm.dispenserCode + ' ' + 0 + ' ' + this.ruleForm.batch
					this.ruleForm.deadLine = this.ruleForm.deadLine + '个月'
					this.ruleForm.units = '每' + this.ruleForm.loadingQuantity + 'g配方颗粒相当于饮片' + this.ruleForm.ypQuantity + 'g'
					this.ruleForm.pelletWeight = '每袋装' + this.ruleForm.pelletWeight + 'g'
					this.ruleForm.nowCheck = "详见二维码"
					this.ruleForm.nowzypf = JSON.parse(JSON.stringify(this.ruleForm.zypf))
					if (['C60中药配方颗粒', 'C70中药配方颗粒'].includes(this.ruleForm.inventoryType)) {
						this.mubans = '1'
					} else if (['C90中药配方颗粒'].includes(this.ruleForm.inventoryType)) {
						this.mubans = '4'
					} else {
						this.mubans = '2'
					}
					this.getmuban(this.mubans)
				}
			})
		},
		getmuban(e) {

			this.muban.forEach(v => {
				if (v.blab == e) this.chooseShow = v
			})

			//中药配方颗粒执行标准

			//有地区
			if (this.chooseShow.showName) {
				if (this.chooseShow.noJosn == 1) { //省标-地方
					this.ruleForm.nowzypf = JSON.parse(JSON.stringify(this.ruleForm.check.checkName))
				} else { // 
					let isTrues = false
					JSON.parse(this.ruleForm.check.checkName).forEach(v => {
						if (v.address == this.chooseShow.showName) {
							this.ruleForm.nowzypf = JSON.parse(JSON.stringify(v.checkName))
							isTrues = true
						}
					})
					if (!isTrues) {
						this.ruleForm.nowzypf = ""
					}
				}

				// 销售备案号		
				let isTrue = false
				JSON.parse(this.ruleForm.sellRecord).forEach(v => {
					if (v.address == this.chooseShow.showName) {
						this.ruleForm.nowCheck = v.recordCode
						isTrue = true
					}
				})
				if (!isTrue) {
					this.ruleForm.nowCheck = ""
				}

			} else {//无地区
				this.ruleForm.nowCheck = "详见二维码"
				this.ruleForm.nowzypf = JSON.parse(JSON.stringify(this.ruleForm.zypf))
				if (this.ruleForm.inventoryType == 'C90中药配方颗粒' && this.chooseShow.noJosn !== 2) {
					this.ruleForm.nowzypf = "详见二维码"
					// console.log(1)
				} else {
					this.ruleForm.nowzypf = JSON.parse(JSON.stringify(this.ruleForm.zypf))
				}
			}

			let companyId = localStorage.getItem("companyId") + "&isNew=" + e
			template_findByCompanyId(`?companyId=${companyId}`).then((res) => {
				//   console.log(JSON.parse(res.data[0].content))
				if (res.data.length > 0) {
					this.disabled = false
					let nowMuban = JSON.parse(res.data[0].content)
					for (let i in this.keys) {
						for (let n in nowMuban) {
							if (nowMuban[n].name == i) {
								this.content[i] = this.ruleForm[this.keys[i]]
							}
						}
					}
					// console.log(this.content)	
				} else {
					this.content = [],
						this.disabled = true
				}
			})
		},
		backPage() {
			this.$router.go(-1);
		},
		async versons() {

			if (process.env.NODE_ENV === 'development') {
			    this.objectURL ='/api/print/getBarCodeByBatch?batch=' + this.$route.query.bench+'&&isNew='+this.types
			} else {
				this.objectURL ="http://" + window.location.host + '/print/getBarCodeByBatch?batch=' + this.$route.query.bench+'&&isNew='+this.types
			}
		},
		typechange() {
			this.versons();
		},
		changeNum(val) {
			var num = Math.floor(val)
			if (num <= 0) {
				this.$notify.error({
					title: '提示',
					message: '数量不能为零或负数！',
					showClose: false,
					duration: 2000
				});
				this.ruleForm.printNum = ''
			}
			if (num > this.infos.most) {
				this.$notify.error({
					title: '提示',
					message: '数量不能大于未打印数量！',
					showClose: false,
					duration: 2000
				});
				this.ruleForm.printNum = ''
			}
		},

		submitRules(formName) {
			this.$refs[formName].validate((valid) => {
				if (!valid) return
				if (!this.ruleForm.nowzypf) return this.$notify({
					title: '提示',
					message: '配方颗粒执行标准不存在',
					type: 'error',
					duration: 1000
				});
				if (!this.ruleForm.nowCheck) return this.$notify({
					title: '提示',
					message: '销售备案号不存在',
					type: 'error',
					duration: 1000
				});
				this.$confirm('提交打印数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let param = {
						barCode: this.types=='1'?this.ruleForm.newBarCode:this.ruleForm.barCode,
						breedName: this.ruleForm.breedName,
						modal: this.ruleForm.inventoryType,
						type: this.ruleForm.inventoryType.substr(0, 3),
						url: 'http://sy.xinlvyao.com:10109/n/index.html?code=',
						...this.content
					}
					if (['C60中药配方颗粒', 'C80中药配方颗粒'].includes(this.ruleForm.inventoryType)) {
						delete param.barCode
					}
					console.log(JSON.stringify(param))
					print_send({
						"printId": this.infos.id,
						"printNum": this.ruleForm.printNum,
						"content": JSON.stringify(param)
					}).then((res) => {
						if (res.mongoStatus == '1' || res.sendStatus == "1") {
							this.$notify.error({
								title: '提示',
								message: res.msg,
								showClose: false,
								duration: 2000
							});
						} else {
							this.$notify({
								title: '提示',
								message: '提交成功',
								type: 'success',
								duration: 1000
							});
							this.backPage()
						}
					})
				}).catch(() => {

				})
			})
		}
	}
}
</script>

<style lang="less" scoped>
.text {
	font-size: 14px;
}

.item {
	margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}

.clearfix:after {
	clear: both
}

.box-card {
	width: 800px;
}

.msg-box {
	width: 100%;
	display: flex;

	.left-msg {
		width: 100%;

		.img-erwei {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.img1 {
				
				width: 60%;
				height: 80%;
				img{
					display: block;
					width: 100%;
					margin-bottom: 20px;
				}
			}

			.img2 {
				width: 20%;
				display: block;
			}
		}
	}


}

.msg-item {
	width: 100%;
	display: flex;
	margin: 10px 0;

	.item-left {
		width: 30%;
		font-size: 16px;
		color: #777777;
	}

	.item-right {
		flex: 1;
		font-size: 16px;
		font-weight: 500;
		color: black;
	}
}

.position {
	width: 100%;
	position: fixed;
	bottom: 0;
	padding: 20px;
}
</style>